<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements.  See the NOTICE file
distributed with this work for additional information
regarding copyright ownership.  The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License.  You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied.  See the License for the
specific language governing permissions and limitations
under the License.
-->

<html>
<head>
    <meta charset="utf-8">
    <script src="./lib/jquery.min.js"></script>
    <script src="lib/esl.js"></script>
    <script src="lib/config.js"></script>
</head>


<body>
<style>
    html,
    body {
        padding: 0;
        margin: 0;
    }

    .demo {
        position: relative;
        margin-top: 100px;
        margin-left: 100px;
    }

    .pc-chart {
        width: 540px;
        height: 300px;
    }

    .mobile-box {
        position: absolute;
        left: 280px;
        top: -40px;
        width: 215px;
        height: 360px;
        z-index: 300;
        user-select: none;
    }

    .mobile-content {
        position: absolute;
        overflow: hidden;
        width: 150px;
        height: 272px;
        left: 312px;
        top: 0;
        background: #333;
        z-index: 300;
    }

    .mobile-chart {
        position: absolute;
        top: -95px;
        left: -75px;
        width: 300px;
        height: 460px;
    }
</style>
<div class="demo">
    <div class="pc-chart"></div>
</div>


<script type="text/javascript">


    require([
        'echarts'
        // 'echarts/chart/line',
        // 'echarts/component/legend',
        // 'echarts/component/grid',
        // 'echarts/component/tooltip',
        // 'echarts/component/title',
        // 'echarts/component/dataZoom',

        // 'echarts/scale/Time'
    ], function (echarts) {

        var data = {
            "years": [1800, 1810, 1820, 1830, 1840, 1850, 1860, 1870, 1880, 1890, 1900, 1910, 1920, 1930, 1940, 1950, 1951, 1952, 1953, 1954, 1955, 1956, 1957, 1958, 1959, 1960, 1961, 1962, 1963, 1964, 1965, 1966, 1967, 1968, 1969, 1970, 1971, 1972, 1973, 1974, 1975, 1976, 1977, 1978, 1979, 1980, 1981, 1982, 1983, 1984, 1985, 1986, 1987, 1988, 1989, 1990, 1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999, 2000, 2001, 2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011, 2012, 2013, 2014, 2015],
            "lifeExpectancy": [29.5734572, 29.5734572, 29.5734572, 29.5734572, 29.5734572, 29.5734572, 29.5734572, 31.12082604, 30.20106663, 29.93047652, 30.74960789, 31.40217766, 20.5, 36.428, 41.056, 57.084, 57.5768, 57.9696, 58.7624, 60.7552, 63.148, 64.6408, 63.7336, 66.6264, 67.3692, 68.382, 68.6248, 68.2776, 68.7404, 69.5332, 69.116, 69.1788, 68.9616, 68.9144, 68.3872, 68.5, 68.6, 68.7, 68.7, 68.6, 68.2, 68, 67.8, 67.7, 67.4, 67.3, 67.5, 67.9, 67.7, 67.4, 68.2, 69.8, 70.1, 70, 69.8, 69.6, 69.4, 68, 65.2, 63.6, 64.2, 65.9, 67.4, 67.6, 66.2, 65.4, 65.1, 64.9, 64.8, 65, 64.8, 66.1, 67.2, 67.6, 68.3, 68.7, 69.4, 70.4, 71.3, 72.21, 73.13],
            "income": [1430, 1447, 1464, 1562, 1666, 1778, 1896, 2023, 2158, 2233, 3087, 3487, 1489, 3779, 5632, 7514, 7424, 7775, 7981, 8234, 8787, 9465, 9496, 10037, 9755, 10496, 10908, 11027, 10620, 11836, 12363, 12823, 13256, 13902, 13972, 14915, 15170, 15113, 16236, 16594, 16530, 17192, 17487, 17818, 17632, 17557, 17619, 17951, 18417, 18527, 18576, 19221, 19355, 19660, 19906, 19349, 18332, 15661, 14320, 12535, 12013, 11597, 11779, 11173, 11925, 13173, 13902, 14629, 15768, 16967, 18118, 19660, 21374, 22506, 20739, 21664, 22570, 23299, 23561, 23293, 23038],
            "population": [31088398, 31088398, 31861526, 34134430, 37420913, 41023821, 44966686, 49288504, 53996807, 59151534, 64836675, 71044207, 77871987, 85369549, 93588981, 102798657, 104306354, 105969442, 107729541, 109537868, 111355224, 113152347, 114909562, 116615781, 118266807, 119860289, 121390327, 122842753, 124193114, 125412397, 126483874, 127396324, 128165823, 128837792, 129475269, 130126383, 130808492, 131517584, 132254362, 133012558, 133788113, 134583945, 135406786, 136259517, 137144808, 138063062, 139006739, 139969243, 140951400, 141955200, 142975753, 144016095, 145056221, 146040116, 146895053, 147568552, 148040354, 148322473, 148435811, 148416292, 148293265, 148078355, 147772805, 147385440, 146924174, 146400951, 145818121, 145195521, 144583147, 144043914, 143622566, 143338407, 143180249, 143123163, 143126660, 143158099, 143211476, 143287536, 143367341, 143429435, 143456918]
        };

        echarts.util.each(data.years, function (year, index) {
            year = +new Date(year, 0, 1);
            data.population[index] = [year, data.population[index]];
            data.lifeExpectancy[index] = [year, data.lifeExpectancy[index]];
            data.income[index] = [year, data.income[index]];
        });

        var series1Color = '#c23531';
        var series2Color = 'rgba(4,127,154,1)';
        var series3Color = '#2f4554';
        var series3AreaColor = {
            x: 0,
            x2: 0,
            y: 0,
            y2: 1,
            colorStops: [
                {offset: 0, color: series3Color},
                {offset: 1, color: 'rgba(0,0,0,0)'}
            ]
        };
        var series2AreaColor = {
            x: 0,
            x2: 0,
            y: 0,
            y2: 1,
            colorStops: [
                {offset: 0, color: 'rgba(4,127,154,0.8)'},
                {offset: 1, color: 'rgba(0,0,0,0)'}
            ]
        };


        var y3Formatter = function (val) {
            return (val / 1000).toFixed(0) + ' k';
        };
        var y3AxisPointerFormatter = function (params) {
            return (params.value / 1000).toFixed(0) + ' k';
        };

        var option = {
            backgroundColor: '#3aadd1',
            // textStyle: {
            //     fontFamily: 'Tahoma'
            // },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross'
                },
                padding: 5,
                backgroundColor: '#eee',
                borderColor: '#999',
                borderWidth: 1,
                textStyle: {
                    color: '#222'
                },
                extraCssText: 'z-index: 200'
            },
            axisPointer: {
                link: [{xAxisIndex: 'all'}],
                label: {
                    textStyle: {
                        color: '#222'
                    }
                },
                z: 500
            },
            xAxis: [{
                type: 'time',
                splitLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLine: {
                    show: false,
                    lineStyle: {
                        color: '#ddd'
                    }
                },
                axisLabel: {
                    show: false,
                    textStyle: {
                        color: '#ddd'
                    }
                },
                axisPointer: {
                    label: {
                        show: false
                    }
                }
            }, {
                type: 'time',
                gridIndex: 1,
                splitLine: {
                    show: false
                },
                axisTick: {
                    show: false,
                    lineStyle: {
                        color: '#ddd'
                    }
                },
                axisLine: {
                    show: false,
                    lineStyle: {
                        color: '#ddd'
                    }
                },
                axisLabel: {
                    textStyle: {
                        color: '#ddd'
                    }
                }
            }],
            yAxis: [{
                splitNumber: 3,
                nameTextStyle: {
                    color: '#ccc',
                    fontSize: 18
                },
                axisLine: {
                    lineStyle: {
                        color: '#ddd'
                    }
                },
                axisTick: {
                    inside: true,
                    lineStyle: {
                        color: '#ddd'
                    }
                },
                splitLine: {
                    show: false
                },
                axisLabel: {
                    inside: true,
                    textStyle: {
                        color: '#ddd'
                    }
                },
                axisPointer: {
                    label: {
                        textStyle: {
                            color: series1Color
                        }
                    }
                },
                z: 200
            }, {
                position: 'right',
                splitNumber: 3,
                nameTextStyle: {
                    color: '#ccc',
                    fontSize: 18
                },
                axisLine: {
                    lineStyle: {
                        color: '#ddd'
                    }
                },
                axisTick: {
                    inside: true,
                    lineStyle: {
                        color: '#ddd'
                    }
                },
                splitLine: {
                    show: false
                },
                axisLabel: {
                    inside: true,
                    formatter: function (value) {
                        return (value / 1000000).toFixed(0) + ' M';
                    },
                    textStyle: {
                        color: '#ddd'
                    }
                },
                axisPointer: {
                    label: {
                        formatter: function (param) {
                            return (param.value / 1000000).toFixed(0) + ' M';
                        },
                        textStyle: {
                            color: series2Color
                        }
                    }
                },
                z: 200
            }, {
                gridIndex: 1,
                splitNumber: 1,
                nameTextStyle: {
                    color: '#ccc',
                    fontSize: 18
                },
                axisLine: {
                    lineStyle: {
                        color: '#ddd'
                    }
                },
                axisTick: {
                    inside: true,
                    lineStyle: {
                        color: '#ddd'
                    }
                },
                splitLine: {
                    show: false
                },
                axisLabel: {
                    inside: true,
                    formatter: y3Formatter,
                    textStyle: {
                        color: '#ddd'
                    }
                },
                axisPointer: {
                    label: {
                        formatter: y3AxisPointerFormatter
                    }
                },
                z: 40
            }],
            grid: [{
                left: 20,
                right: 20,
                top: 30,
                height: 130
            }, {
                left: 20,
                right: 20,
                top: 175,
                height: 60
            }],
            dataZoom: [{
                bottom: 10,
                height: 20,
                left: 18,
                handleIcon: 'M10.7,11.9H9.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4h1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7v-1.2h6.6z M13.3,22H6.7v-1.2h6.6z M13.3,19.6H6.7v-1.2h6.6z', // jshint ignore:line
                handleSize: '80%',
                handleStyle: {
                    color: '#ddd'
                },
                labelFormatter: '',
                borderColor: 'rgba(0,0,0,0.2)',
                xAxisIndex: [0, 1],
                // startValue: +new Date(1860, 0, 1),
                // endValue: +new Date(1969, 0, 1),
                // minValueSpan: new Date(1969, 0, 1) - new Date(1965, 0, 1)
            }, {
                type: 'inside',
                xAxisIndex: [0, 1],
                // startValue: +new Date(1860, 0, 1),
                // endValue: +new Date(1969, 0, 1)
            }],
            series: [
                {
                    type: 'line',
                    name: 'seriesA',
                    id: 'gridScatter',
                    showSymbol: false,
                    symbolSize: 10,
                    hoverAnimation: false,
                    itemStyle: {
                        normal: {
                            color: series1Color
                        }
                    },
                    data: data.lifeExpectancy
                },
                {
                    type: 'line',
                    name: 'seriesB',
                    yAxisIndex: 1,
                    showSymbol: false,
                    itemStyle: {
                        normal: {
                            color: series2Color
                        }
                    },
                    areaStyle: {
                        normal: {
                            color: series2AreaColor
                        }
                    },
                    data: data.population
                },
                {
                    type: 'line',
                    name: 'seriesC',
                    xAxisIndex: 1,
                    yAxisIndex: 2,
                    showSymbol: false,
                    symbolSize: 10,
                    hoverAnimation: false,
                    areaStyle: {
                        normal: {
                            color: series3AreaColor
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: series3Color
                        }
                    },
                    data: data.income
                }
            ]
        };
        var myChart = echarts.init($('.pc-chart')[0]);
        myChart.setOption(option);


    });

</script>


</body>
</html>
